<!DOCTYPE html>
<html>

{include file='public/header'}
<style>
    .layui-card{border: 1px solid #ececec;}
</style>
<body>
    <div class="x-nav">
        <span class="layui-breadcrumb">
            <a href="javascript:void(0)">首页</a>
            <a href="javascript:void(0)">数据统计</a>
            <a><cite>短剧统计</cite></a>
        </span>
        <a class="layui-btn layui-btn-small" id="reload" title="刷新">
            <i class="layui-icon" style="line-height:30px"><i class="iconfont">&#xe6aa;</i></i>
        </a>
    </div>
    <div class="x-body">
        <div class="layui-row layui-col-space15" style="margin-bottom:10px">
            <div class="layui-col-md3">
                <div class="layui-card">
                    <div class="layui-card-header flex">
                        <div style="display: flex;">
                            <span class="font-bold">直接充值<i class="layui-icon iconfont icon-lytishi1" id="direct_recharge_tip"></i></b>
                        </div>
                    </div>
                    <div class="layui-card-body">
                        <div>
                            <div>充值总额：
                                <span class="layui-font-green">¥<span id="direct_recharge">0</span></span>
                            </div>
                        </div>
                        <div>
                            <div>充值笔数：
                                <span class="layui-font-green"><span id="direct_recharge_num">0</span></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="layui-card">
                    <div class="layui-card-header flex">
                        <div style="display: flex;">
                            <span class="font-bold">链接引导充值<i class="layui-icon iconfont icon-lytishi1" id="guide_recharge_tip"></i></b>
                        </div>
                    </div>
                    <div class="layui-card-body">
                        <div>
                            <div>充值总额：
                                <span class="layui-font-green">¥<span id="guide_recharge">0</span></span>
                            </div>
                        </div>
                        <div>
                            <div>充值笔数：
                                <span class="layui-font-green"><span id="guide_recharge_num">0</span></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <blockquote class="layui-elem-quote">提示：数据更新可能存在10分钟延迟</blockquote>
        <div class="layui-row">
            <form class="layui-form">
                <div class="layui-inline">
                    <label class="layui-form-label w-auto">短剧名称：</label>
                    <div class="layui-input-inline">
                        <input type="text" name="name" placeholder="请输入短剧名称" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <button class="layui-btn" style="margin-left: 10px;" lay-submit lay-filter="searchList">搜索</button>
                <button type="reset" id="resetList" class="layui-btn layui-btn-primary">重置</button>
            </form>
        </div>
        <table id="videoStatistics" lay-filter="videoStatistics"></table>
    </div>
    <script>
        function videoStatistics(params) {
            layui.use(['table', "form"], function () {
                let table = layui.table;
                    form = layui.form;
                let tableOption = {
                    elem: '#videoStatistics'
                    , url: '/cps/index/videoStatisticsList' //数据接口
                    , id: 'videoStatistics'
                    , page: true
                    , limit:12
                    , response: {
                        statusCode: 200 //规定成功的状态码，默认：0
                    }
                    // ,parseData:function(res){
                    //     return {
                    //         'data': res.data.data.data
                    //     }
                    // }
                    , cols: [[ //表头
                        { field: 'id', title: 'ID', width: 120, sort: true, align:'center' }
                        , { field: 'name', title: '名称', align:'center' }
                        , { field: 'today_recharge', title: '今日充值', align:'center' }
                        , { field: 'yesterday_recharge', title: '昨日充值', align:'center' }
                        , { field: 'total_recharge', title: '累计充值（不含今日）', align:'center' }
                    ]]
                    , where : params
                    
                }
                tableList(tableOption)
                form.on('submit(searchList)', function (data) {
                    params = data.field
                    videoStatistics(params)
                    return false
                });
                $('#resetList').on('click', function () {
                    params = {}
                    videoStatistics(params)
                });
            })
        }
        videoStatistics({})

        Ajax('/cps/index/videoStatistics', {}).then(data => {
            var keys = Object.keys(data.data);
            for (var i = 0; i < keys.length; i++) {
                $(`#${keys[i]}`).html(data.data[keys[i]])
            }
        });

        tips('#direct_recharge_tip','#direct_recharge_tip','非推广链接进入的用户充值')
        tips('#guide_recharge_tip','#guide_recharge_tip','从推广链接进入的用户充值')
    </script>
</body>

</html>